import React, { memo, useEffect } from 'react';
import type { FC, ReactNode } from 'react';
// import request from '@/service/index';
import { useAppDispatch } from '@/store';
import {
  fetchBannerDataAction,
  fetchHotRecommend,
  fetchNewAlbums,
  fetchRankingDataAction,
  fetchSingersRecommend
} from './store/recommend';
import TopBanner from './c-cpns/top-banner';
import HotRecommend from './c-cpns/hot-recommend';
import { RecommendWrapper } from './style';
import NewAlbum from './c-cpns/new-album';
import UserLogin from './c-cpns/user-login';
import TopRanking from './c-cpns/top-ranking';
import SettleSinger from './c-cpns/settle-singer';
import HotAnchor from './c-cpns/hot-anchor';

interface IProps {
  children?: ReactNode;
}

const Recommend: FC<IProps> = () => {
  const dispatch = useAppDispatch();

  useEffect(() => {
    // request.get({ url: '/banner' }).then((res) => {
    //   console.log('res', res);
    // });
    dispatch(fetchBannerDataAction()); // 发起action（获取数据）
    dispatch(fetchHotRecommend()); // 获取热门推荐
    dispatch(fetchNewAlbums()); // 获取新碟推荐
    dispatch(fetchRankingDataAction()); // 获取榜单
    dispatch(fetchSingersRecommend()); // h获取歌手列表
  }, []);

  return (
    <RecommendWrapper>
      <TopBanner />
      <div className="content wrap-v2">
        <div className="left">
          <HotRecommend />
          <NewAlbum />
          <TopRanking />
        </div>
        <div className="right">
          <UserLogin />
          <SettleSinger />
          <HotAnchor />
        </div>
      </div>
    </RecommendWrapper>
  );
};

export default memo(Recommend);
